﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>会员注册表单</title>
</head>
<body>
    <div class="bg">
        <form action="#" method="get" autocomplete="off">
        <h2>会员注册表单</h2>
        <p><span>性质：</span><inputtype="radio" name="Nature" checked="checked"/>&nbsp;&nbsp;个人<inputtype="radio" name="Nature" />&nbsp;&nbsp;公司</p>
        <p><span>昵称:</span><input type="text" name="raal_name" pattern="[^u4e00-\ u9fa5]{0,}$" placeholder="例如: 小明" required autofocus/></p>
        <p><span>密码：</span><input type="password"size="40" /></p>
        <p><span>电子邮箱:</span><input type="email" name="myemail" placeholder="123456@126.com" required multiple/>(必须填写)</p> 
        <p><span>所在地：</span><select><option>北京</option><option>上海</option><option>广州</option><option>武汉</option><option>成都</option></select></p>
        <p><span>身份证号:</span><input type="text" name="card" required pattern="^\d{8,18}|[0-9x] {8,18}|[0-9x] {8,18}?$"/></p>
        <p><span>手机号码:</span><input type="tel" name="telphone" pattern="^\d {11}$" required/></p>
        <p><span>意见反馈:</span><input type="text" name="raal_name" pattern="[^u4e00-\ u9fa5]{0,}$" placeholder="如果您有什么意见或问题可以告诉我！" required autofocus/></p>
    <p class="btn">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    </p>
    </form>
    <div>
    <style>
      body{
        font-size: 12px; font-family: "微软雅黑"；/*全局控制*/
      }
      body,form,input,h1,p{
        padding: 0; margin: 0; border: 0;/*重置浏览器*/
      }
      .bg{
        width: 1000px;
        height: 717px;
        background: url(1.jpg)no-repeat;/*添加背景图片*/
        position: relative;/*设置相对定位*/
      }
      form{
        width: 600px;
        height: 400px;
        margin: 50px auto;/*使表单在浏览器中居中*/
        padding-left: 30px;/*使边框和内容之间拉开距离*/
        position: absolute;/*设置绝对定位*/
        left: 48%;
        top: 10%;
      }
      h2{
        text-align:center;
        margin: 16px 0;
      }
      p{margin-top: 20px;}
      p span{
        width: 75px;
        display: inline-block;
        text-align: right;
        padding-right: 10px;
      }
      p input{
        width: 200px;
        height: 18px;
        border: 1px solid #38a1bf;
        padding: 2px;
      }
      .lucky input{
        width: 100px;
        height: 24px;
      }
      .btn input{
        width: 100px;
        height: 30px;
        background: #93b518
        margin-top: 20px
        margin-left: 75px
        border-radius:3px
        font-size:18px
        font-family:"微软雅黑"
        color:#fff
      }
    </style>
</body>
</html>